<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入下拉选择</title>
    <link rel="stylesheet" type="text/css" href="../scripts/vendor/bootstrap-4.0.0/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../scripts/vendor/bootstrap-4.0.0/css/bootstrap.min.css"/>
</head>
<style>
    .el-radio {
        color: #606266;
        font-weight: 500;
        line-height: 1;
        position: relative;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap;
        outline: none;
        font-size: 14px;
        margin-right: 30px;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    .el-radio__input {
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        display: inline-block;
        line-height: 1;
        position: relative;
        vertical-align: middle;
    }
    .el-radio__input.is-checked .el-radio__inner {
        border-color: #409eff;
        background: #409eff;
    }
    .el-radio__inner:after {
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background-color: #fff;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(0);
        transition: transform .15s ease-in;
    }
    .el-radio__input.is-checked .el-radio__inner:after {
        transform: translate(-50%,-50%) scale(1);
    }
    .el-radio__inner {
        border: 1px solid #dcdfe6;
        border-radius: 100%;
        width: 14px;
        height: 14px;
        background-color: #fff;
        position: relative;
        cursor: pointer;
        display: inline-block;
        box-sizing: border-box;
    }
    .el-radio__original {
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
    }
    .el-radio__input.is-checked+.el-radio__label {
        color: #409eff;
    }
    .el-radio__label {
        font-size: 14px;
        padding-left: 10px;
    }
</style>
<body>
<div>
    <label role="radio" tabindex="0" class="el-radio">
        <span class="el-radio__input">
            <span class="el-radio__inner"></span>
            <input type="radio" aria-hidden="true" tabindex="-1" class="el-radio__original" value="1">
        </span>
        <span class="el-radio__label">备选项<!----></span>
    </label>
    <label role="radio" tabindex="0" class="el-radio is-checked" aria-checked="true">
        <span class="el-radio__input is-checked">
            <span class="el-radio__inner"></span>
            <input type="radio" aria-hidden="true" tabindex="-1" class="el-radio__original" value="2">
        </span>
        <span class="el-radio__label">备选项<!----></span>
    </label>
</div>

<script type="text/javascript" src="../scripts/vendor/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../scripts/vendor/bootstrap-4.0.0/js/bootstrap.js"></script>
<script type="text/javascript" src="../scripts/vendor/bootstrap-4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
